<template>
    <view class="container">
        <NavBar :title="appTitle" @back="goBack" />
        <scroll-view class="list" scroll-y>
            <uv-image v-if="imgSrc" :src="imgSrc" class="img" />
            <!-- 审批详情 -->
            <view class="particulars">
                <view class="particulars-item">
                    <view class="particulars-title">审批类型</view>
                    <view class="particulars-content">
                        {{ formData.flowTypeName }}
                    </view>
                </view>
                <view class="particulars-item">
                    <view class="particulars-title">所属项目</view>
                    <view class="particulars-content">
                        {{ formData.projectName }}
                    </view>
                </view>
                <view class="particulars-item">
                    <view class="particulars-title">所属合同</view>
                    <view class="particulars-content">
                        {{ formData.contractName }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">周期类型</view>
                    <view class="particulars-content">
                        {{ formData.cycleType }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">支付期号</view>
                    <view class="particulars-content">
                        {{ formData.payNo }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">收款单位</view>
                    <view class="particulars-content">
                        {{ formData.paymentUnit }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">开户行</view>
                    <view class="particulars-content">
                        {{ formData.openingBank }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">账号</view>
                    <view class="particulars-content">
                        {{ formData.account }}
                    </view>
                </view>
                <!-- <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">本期申请支付</view>
                    <view class="particulars-content">
                        {{ formData.account }}
                    </view>
                </view> -->
                <view class="particulars-item" v-if="formData.flowType == '5'">
                    <view class="particulars-title">本期结算金额</view>
                    <view class="particulars-content">
                        {{ formData.settlementAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '6' || formData.flowType == '2'">
                    <view class="particulars-title">变更编号</view>
                    <view class="particulars-content">
                        {{ formData.changeCode }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '6' || formData.flowType == '2'">
                    <view class="particulars-title">变更名称</view>
                    <view class="particulars-content">
                        {{ formData.changeName }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '6' || formData.flowType == '2'">
                    <view class="particulars-title">变更类别</view>
                    <view class="particulars-content">
                        {{ formData.changeType }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '6' || formData.flowType == '2'">
                    <view class="particulars-title">变更时间</view>
                    <view class="particulars-content">
                        {{ formData.changeAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">结算单位</view>
                    <view class="particulars-content">
                        {{ formData.settlementUnit }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">原合同金额</view>
                    <view class="particulars-content">
                        {{ formData.contractAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">变更后金额</view>
                    <view class="particulars-content">
                        {{ formData.changeAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">本期末结算</view>
                    <view class="particulars-content">
                        {{ formData.periodEndAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">本期末进项税合计</view>
                    <view class="particulars-content">
                        {{ formData.periodEndTotalAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '3'">
                    <view class="particulars-title">截止日期</view>
                    <view class="particulars-content">
                        {{ formData.deadlineTime }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">租赁商名</view>
                    <view class="particulars-content">
                        {{ formData.leaseName }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">结算期间</view>
                    <view class="particulars-content">
                        {{ formData.settlementPeriod }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">期号</view>
                    <view class="particulars-content">
                        {{ formData.cycleNo }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">预计合同金额</view>
                    <view class="particulars-content">
                        {{ formData.contractAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">至上期末累计结算</view>
                    <view class="particulars-content">
                        {{ formData.lasEndAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">本期结算</view>
                    <view class="particulars-content">
                        {{ formData.periodAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">至本期末累计结算</view>
                    <view class="particulars-content">
                        {{ formData.periodEndAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '4' || formData.flowType == '7'">
                    <view class="particulars-title">扣款小记</view>
                    <view class="particulars-content">
                        {{ formData.deductionAmt }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">周期序号</view>
                    <view class="particulars-content">
                        {{ formData.cycleNumber }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">周期名称</view>
                    <view class="particulars-content">
                        {{ formData.cycleName }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">开始日期</view>
                    <view class="particulars-content">
                        {{ formData.startDate }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">结束日期</view>
                    <view class="particulars-content">
                        {{ formData.endDate }}
                    </view>
                </view>
                <view class="particulars-item" v-if="formData.flowType == '1'">
                    <view class="particulars-title">计量月份</view>
                    <view class="particulars-content">
                        {{ formData.meteringDate }}
                    </view>
                </view>
            </view>
            <view class="annex" v-if="shouldShowAnnex">
                <uv-collapse>
                    <uv-collapse-item class="annex-item" title="报表" name="Docs guide">
                        <!-- 根据 flowType 动态展示对应的报表 -->
                        <view class="annex-whole" v-for="(item, index) in getAnnexListByFlowType()" :key="index">
                            <view class="annex-content" @click="clickAnnex(item)">
                                {{ item.name }}
                            </view>
                        </view>
                    </uv-collapse-item>
                </uv-collapse>
            </view>
            <!-- 审批流程 -->
            <view class="flowChart">
                <view class="captionText">
                    流程
                </view>
                <!-- 审批 -->
                <view class="flow" v-for="i in formData.flowList" :key="i.id">
                    <view class="icon">
                        <view class="icon-circle">

                        </view>
                        <view class="icon-line">

                        </view>
                    </view>
                    <view class="flowTitle" @click="handleClick(i)">
                        <view class="process">
                            <view class="approve">
                                {{ i.deptName }}
                            </view>
                            <view class="approveTime">
                                {{ i.nodeTime }}
                            </view>
                        </view>
                        <view class="approver process">
                            <view class="approver-name">
                                {{ i.nickName }}
                            </view>
                            <view class="approve-state" :class="['status-tag', stateCon(i.nodeState)]">
                                {{ i.nodeState }}
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <uv-button v-if="activeIndex == 1" class="but" shape="circle" type="primary" text="审批"
            @click="redirect"></uv-button>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar/index.vue'
import {
    getApproveInfo
} from '@/utils/app.js'
import {
    BASEURL
} from '@/utils/request.js'
export default {
    components: {
        NavBar
    },
    data() {
        return {
            appTitle: '',
            parsedData: {
                flowList: []
            },
            formData: {
                flowType: '',
                projectId: '',
                contractId: '',
                cycleId: '',
                serialNumber: '',
            },
            activeIndex: '',
            imgSrc: '',
            //周期报表
            annexList: [],
            paymentList: [],
            deviceList: [],
            safetyList: [],
            materialList: [],
            // ... 其他数据
        };
    },
    computed: {
        // 判断是否显示报表区域
        shouldShowAnnex() {
            const flowType = this.formData.flowType;
            return flowType !== '2' && flowType !== '6';
        }
    },
    onLoad(options) {
        //获取传来的参数
        this.parsedData = JSON.parse(decodeURIComponent(options.data));
        this.activeIndex = this.parsedData.activeIndex;
        this.appTitle = this.parsedData.title;
        this.getApproveInfoData()
    },
    methods: {
        onPullDownRefresh() {
            this.getApproveInfoData()
        },
        //获取审批详情
        getApproveInfoData() {
            getApproveInfo({
                id: this.parsedData.id
            }).then(res => {
                if (res && res.code == 200) {
                    this.formData = res.data;
                    this.imgSrc = this.getStatusImg(this.formData.status)
                }
            })
        },
        //审批
        redirect() {
            uni.navigateTo({
                url: `/pages/examineApprove/index?data=${encodeURIComponent(JSON.stringify(this.formData))}`
            })
        },
        goBack() {
            uni.navigateBack({
                delta: 1
            });
        },
        getStatusImg(status) {
            if (status == '1') {
                return '/static/icons/passimg.png'
            } else {
                return ''
            }
        },
        handleClick(i) {
            uni.navigateTo({
                url: `/pages/approvalProcess/detail?data=${encodeURIComponent(JSON.stringify(i))}`
            })
        },
        stateCon(val) {
            switch (val) {
                case '已同意':
                    return 'approved'
                case '已驳回':
                    return 'rejected'
                case '已发起':
                    return 'initiate'
                case '审批中':
                    return 'pending'
                case '等待中':
                    return 'waiting'
                default:
                    return 'other'
            }
        },
        //点击报表
        clickAnnex(item) {
            uni.downloadFile({
                url: item.url,
                success: function (res) {
                    var filePath = res.tempFilePath;
                    uni.openDocument({
                        filePath: filePath,
                        // showMenu 是 uni.openDocument 的参数，用于控制是否显示右上角菜单（如分享、收藏等），true 表示显示菜单
                        showMenu: true,
                        success: function (res) {
                            console.log('打开文档成功');
                        }
                    });
                },
                fail: function (err) {
                    console.log(err);
                }
            });
        },
        // 根据 flowType 获取对应的报表列表
        getAnnexListByFlowType() {
            const flowType = this.formData.flowType;

            if (flowType === '2' || flowType === '6') {
                return [];
            }

            switch (flowType) {
                // case 'cycle':
                case '1':
                    return this.getDynamicAnnexList('cycle');
                // case 'payment':
                case '3':
                    return this.getDynamicAnnexList('payment');
                // case 'device':
                case '4':
                    return this.getDynamicAnnexList('device');
                // case 'safety':
                case '5':
                    return this.getDynamicAnnexList('safety');
                // case 'material':
                case '7':
                    return this.getDynamicAnnexList('material');
                default:
                    return [
                        // ...this.getDynamicAnnexList('cycle'),
                        // ...this.getDynamicAnnexList('payment'),
                        // ...this.getDynamicAnnexList('device'),
                        // ...this.getDynamicAnnexList('safety'),
                        // ...this.getDynamicAnnexList('material')
                    ];
            }
        },
        // 生成动态报表列表
        getDynamicAnnexList(type) {
            const baseUrl = BASEURL;
            // 设备结算审批：relatedId = 周期Id && 供应商Id && 供应商合同编号 && 业务编码
            // 材料结算审批：relatedId = 周期Id && 供应商Id && 入库单id && 业务编码
            //拆分relatedId
            if (type == 'device') {
                const relatedId = this.formData.relatedId.split('&&');
                this.formData.cycleId = relatedId[0];
                this.formData.supplierId = relatedId[1];
                this.formData.contractNo = relatedId[2];
            } else if (type == 'material') {
                const relatedId = this.formData.relatedId.split('&&');
                this.formData.cycleId = relatedId[0];
                this.formData.supplierId = relatedId[1];
                this.formData.singleId = relatedId[2];
            } else if (type == 'safety') {
                this.formData.supplierId = this.formData.paymentId;
            }

            // 根据类型和 formData 参数生成不同的报表配置
            const reportConfigs = {
                //周期报表
                cycle: [
                    {
                        name: '劳务结算汇总表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1001_LWJSHZB`
                    },
                    {
                        name: '工程量计价清单表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1002_GCLJJQDB`
                    },
                    {
                        name: '工程量变更表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1003_GCLBGB`
                    },
                    {
                        name: '经营情况反馈表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1005_JYQKFKB`
                    },
                    {
                        name: '甲方代发工资款计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1006_JFDFGZKJSB`
                    },
                    {
                        name: '甲方代发其他款项计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1006_JFDFQTKXJSB`
                    },
                    {
                        name: '甲供主要材料费计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1007_JGZYCLFJSB`
                    },
                    {
                        name: '甲供主要材料费计算表(内控表)',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1007_JGZYCLFJSB_NKB`
                    },
                    {
                        name: '甲供主要设备费计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1008_JGZYSBFJSB`
                    },
                    {
                        name: '工程量额定设备使用费计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1009_GCLEDSBSYFJSB`
                    },
                    {
                        name: '其他物资扣回一览表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1011_QTWZKHYLB`
                    },
                    {
                        name: '税费计算表',
                        url: `${baseUrl}/pdf/cycleSummary?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.relatedId}&serialNumber=XZ_1012_SFJSB`
                    },
                ],
                //支付报表审批
                payment: [
                    {
                        name: '资金审批计算表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&serialNumber=XZ_CW_1017_ZJSPJSB`
                    },
                    {
                        name: '支付台账',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&serialNumber=XZ_CW_1018_ZFTZ`
                    },
                    {
                        name: '结算台账',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&serialNumber=XZ_CW_1019_JSTZ`
                    }
                ],
                //设备结算审批报表
                device: [
                    {
                        name: '租赁商结算汇总表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&supplierId=${this.formData.supplierId}&contractNo=${this.formData.contractNo}&serialNumber=XZ_JX_1025_ZLSJSHZB`
                    },
                    {
                        name: '机械设备考勤汇总表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&supplierId=${this.formData.supplierId}&contractNo=${this.formData.contractNo}&month=${new Date().getFullYear()}-${(new Date().getMonth() + 1).toString().padStart(2, '0')}&serialNumber=XZ_JX_1027_JXSBKQHZB`
                    },
                    {
                        name: '设备使用单位结算明细表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&supplierId=${this.formData.supplierId}&contractNo=${this.formData.contractNo}&serialNumber=XZ_JX_1029_SBSYDWJSMXB`
                    },
                    {
                        name: '设备租赁商结算明细表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&supplierId=${this.formData.supplierId}&contractNo=${this.formData.contractNo}&serialNumber=XZ_JX_1026_SBZLSJSMXB`
                    },
                    {
                        name: '设备租赁商扣款明细表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&supplierId=${this.formData.supplierId}&contractNo=${this.formData.contractNo}&serialNumber=XZ_JX_1028_SBZLSKKMXB`
                    },
                ],
                //安全支付审批报表
                safety: [
                    {
                        name: '安全生产费用支付审批单',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&serialNumber=XZ_AQ_1032_AQSCFYZFSPD`
                    },
                    {
                        name: '安全生产费使用情况表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&serialNumber=XZ_AQ_1033_AQSCFSYQKB`
                    }
                ],
                //材料结算审批报表
                material: [
                    {
                        name: '物资供应商结算汇总表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&cycleId=${this.formData.cycleId}&serialNumber=XZ_CL_1024_ZLSJSHZB`
                    },
                    {
                        name: '材料入库单',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&singleId=${this.formData.singleId}&serialNumber=XZ_CL_1020_CLRKD`
                    },
                    {
                        name: '材料出库单',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&cycleId=${this.formData.cycleId}&serialNumber=XZ_CL_1021_CLCKD`
                    },
                    {
                        name: '物资使用单位对账单',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&cycleId=${this.formData.cycleId}&serialNumber=XZ_CL_1023_SYDWDZD`
                    },
                    {
                        name: '供应商对账单',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&cycleId=${this.formData.cycleId}&serialNumber=XZ_CL_1022_GYSDZD`
                    },
                    {
                        name: '物资供应商扣款明细表',
                        url: `${baseUrl}/pdf/jlzfPdf?projectId=${this.formData.projectId}&contractId=${this.formData.contractId}&supplierId=${this.formData.supplierId}&singleId=${this.formData.singleId}&cycleId=${this.formData.cycleId}&serialNumber=XZ_CL_1025_CLZLSJSMXB`
                    },
                ]
            };

            return reportConfigs[type] || [];
        },
    },

}
</script>

<style lang="scss" scoped>
* {
    box-sizing: border-box;
}

.container {
    display: flex;
    flex-direction: column;

    .list {
        height: 1450rpx;
        // padding: 0 30rpx;
        background-color: #E7E7E7;
    }

    .particulars {
        margin-bottom: 20rpx;
    }



    .particulars-item {
        padding: 30rpx 30rpx;
        display: flex;
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: normal;
        line-height: 48rpx;
        color: rgba(0, 0, 0, 0.9);
        border-bottom: 1rpx solid #E7E7E7;
        background-color: #FFF;

        .particulars-title {
            width: 162rpx;
            margin-right: 32rpx;
        }

        .particulars-content {
            width: 80%;
            font-size: 30rpx;
            word-break: break-all;
        }
    }

    .flowChart {
        background-color: #fff;
        margin-bottom: 30rpx;
    }

    .captionText {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        padding: 32rpx;
        border-bottom: 1rpx solid #E7E7E7;
    }

    //深度选择器
    ::v-deep .uv-cell__title-text {
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
    }

    .flow {
        display: flex;

        .icon {
            position: relative;
            width: 80rpx;

            .icon-circle {
                z-index: 10;
                position: absolute;
                transform: translate(-50%, -50%);
                left: 50%;
                top: 50%;
                width: 16rpx;
                height: 16rpx;
                border-radius: 16rpx;
                background-color: #4980FF;
            }

            .icon-line {
                width: 2rpx;
                height: 100%;
                border-left: 2px dashed #E7E7E7;
                position: absolute;
                // transform: translate(-50%,-50%);
                left: 48%;
                top: 50%;
            }
        }

        .flowTitle {
            padding: 28rpx 20rpx 28rpx 0;
            flex: 1;
            display: flex;
            flex-direction: column;

            font-family: PingFang SC;
            font-size: 28rpx;
            font-weight: normal;
            line-height: 44rpx;
            border-bottom: 1rpx solid #E7E7E7;
        }

        .flowTitle:hover {
            // background-color: #e6f7ff;
            cursor: pointer;
        }

        .process {
            display: flex;
            justify-content: space-between;
        }

        .approver-name {
            font-size: 28rpx;
            color: rgba(0, 0, 0, 0.45);
        }

        .approve-state {
            padding: 0 10rpx;
            color: #FFFFFF;
            border-radius: 4rpx;
        }
    }

    .but {
        position: fixed;
        transform: translateX(50%);
        right: 50%;
        bottom: 30rpx;
        width: 580rpx;
        margin: 0 auto;
    }

    .img {
        height: 0 !important;
    }

    .img ::v-deep .uv-image {
        position: absolute;
        right: 40px;
        top: 20px;
        width: 120rpx !important;
        height: 120rpx !important;
    }
}

.status-tag.approved {
    background-color: #00B42A;
}

.status-tag.rejected {
    background-color: #F53F3F;
}

.status-tag.pending {
    background-color: #C9CDD4;
}

.status-tag.waiting {
    background-color: #C9CDD4;
}

.status-tag.other {
    background-color: #C9CDD4;
}

.status-tag.initiate {
    background-color: #165DFF;
}

.annex {
    background-color: #fff;
    margin-bottom: 0.9375rem;
}

.annex-item {
    padding: 30rpx 0;
    border-bottom: 1rpx solid #E7E7E7;
    background-color: #FFF;

    .annex-whole {
        display: flex;
        padding: 20rpx 0;
    }

    .particulars-title {
        width: 300rpx;
        margin-right: 32rpx;
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .particulars-content {
        width: 80%;
        font-size: 30rpx;
        word-break: break-all;
        font-family: PingFang SC;
        font-size: 32rpx;
        font-weight: 400;
        line-height: 48rpx;
        color: rgba(0, 0, 0, 0.9);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .annex-content {
        color: #3c9cff;
        font-size: 30rpx;
    }
}
</style>